<template>
  <!-- 运输任务管理 -->
  <div class="container">
    <div class="app-container">
      <h3>运输任务管理</h3>
      <el-card class="trans_task card_height">
        <el-form inline>
          <el-row :gutter="400">
            <el-col :span="6">
              <el-form-item label="任务编号:" class="itemStyle" label-width="2" style="width:400px;">
                <el-input placeholder="请输入编号" style="width:400px;" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="任务分配状态:" label-width="2">
                <el-select v-model="model" placeholder="" style="width:380px;">
                  <el-input placeholder="一个字" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="满载状态:" label-width="2">
                <el-select placeholder="" style="width:380px;">
                  <el-input placeholder="一个字" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="400">
            <el-col :span="6">
              <el-form-item label="车牌号码:" label-width="2">
                <el-input placeholder="请输入车牌号码" style="width:400px;" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="起始地机构:" label-width="2">
                <el-select v-model="model" placeholder="" style="width:380px;">
                  <el-input placeholder="一个字" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="目的地机构:" label-width="2">
                <el-select v-model="model" placeholder="" style="width:380px;">
                  <el-input placeholder="一个字" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item>
            <el-button type="primary ">搜索</el-button>
            <el-button type="primary ">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="box_height trans_task">
        <div class="status">
          <div class="box">全部124</div>
          <div class="box">待提货18</div>
          <div class="box">进行中2</div>
          <div class="box">已完成31</div>
          <div class="box">已取消73</div>
        </div>
      </el-card>
      <el-card class="trans_task">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            fixed
            prop="date"
            label="序号"
            width="150"
          />
          <el-table-column
            prop="name"
            label="运输任务编号"
            width="120"
          />
          <el-table-column
            prop="province"
            label="车牌号码"
            width="120"
          />
          <el-table-column
            prop="city"
            label="起始地"
            width="120"
          />
          <el-table-column
            prop="address"
            label="目的地"
            width="300"
          />
          <el-table-column
            prop="zip"
            label="运输任务状态"
            width="120"
          />
          <el-table-column
            prop="zip"
            label="车辆装载状态"
            width="120"
          />
          <el-table-column
            prop="zip"
            label="任务分配状态"
            width="120"
          />
          <el-table-column
            prop="zip"
            label="计划发车时间"
            width="120"
          />
          <el-table-column
            prop="zip"
            label="实际发车时间"
            width="120"
          />
          <el-table-column
            prop="zip"
            label="更新时间"
            width="120"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="100"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
              <el-button type="text" size="small">手动调整</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block" style="text-align: center;">
          <span class="demonstration" />
          <el-pagination
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Transportation'
}
</script>
<style scoped lang='scss'>
.trans_task{
// width: 100%;
margin-bottom: 20px;

}
.card_height{
  height: 210px;
}
.btnStyle{

}
.block{
  margin: auto;
}
.ipt_layout{
  display: flex;
  // justify-content: space-around;
}
.itemStyle{

}
.app-container{

}
.status{
  display: flex;
  }
.box_height{
height: 50px;
}
.box{
  width: 120px;
  margin: 0 0 20px;
  // background-color: rgb(255, 238, 235);
}
.iptStyle{
// width: 380px;height: 40px;
}
</style>
